
window.onload=function(){
    InitContent();
    InitImg();
};


/**图片的监听 */
function InitImg(){
    const inclass= `animate__fadeIn`;
    const outclass= `animate__fadeOut`;
    const observer = new IntersectionObserver(startAnimate, { threshold: 1.0 });
    function startAnimate(entries, observer) {
        entries.forEach(entry => {
            let el = entry.target;
            if(!el)return;
            /**显示 */
            if(entry.isIntersecting && !el.classList.contains(inclass)){
                observer.unobserve(entry.target);
                el.classList.remove(outclass);
                el.classList.add(inclass);
                console.log('el-显示 :>> ', el);
            }
            /**隐藏 */
            else if(!entry.isIntersecting &&!el.classList.contains(outclass)){
                observer.unobserve(entry.target);
                console.log('el-隐藏--:>> ', el);
                el.classList.remove( inclass);
                el.classList.add( outclass);
            }
        });
    }
    const elements = document.getElementsByTagName(`img`);
    Array.prototype.forEach.call(elements, function (element) {
        element.classList.add(`animate__animated`);
        observer.observe(element);
        element.addEventListener('animationend', (e) => {
            //e.target.classList.remove(inclass,outclass);
            observer.observe(element);
        });
    });
}

/**内容的监听 */
function InitContent(){
    
    const inclass= `animate__fadeInLeft`;
    const outclass= `animate__fadeOut`;
    const observer = new IntersectionObserver(startAnimate, { threshold: 1.0 });
    function startAnimate(entries, observer) {
        entries.forEach(entry => {
            let el = entry.target.getElementsByClassName('content')[0];
            if(!el)return;
            /**显示 */
            if(entry.isIntersecting && !el.classList.contains(inclass)){
                observer.unobserve(entry.target);
                el.classList.remove(outclass);
                el.classList.add(inclass);
                console.log('el-显示 :>> ', el);
            }
            /**隐藏 */
            else if(!entry.isIntersecting &&!el.classList.contains(outclass)){
                observer.unobserve(entry.target);
                console.log('el-隐藏--:>> ', el);
                el.classList.remove( inclass);
                el.classList.add( outclass);
            }
        });
    }
    const elements = document.getElementsByClassName(`page`);
    Array.prototype.forEach.call(elements, function (element) {
        let el = element.getElementsByClassName('content')[0];
        el?.classList.add(`animate__animated`);
        observer.observe(element);
        element.addEventListener('animationend', (e) => {
            //e.target.classList.remove(inclass,outclass);
            observer.observe(element);
        });
    });
}

/** 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
const debounce = (func = function () { }, wait = 800, immediate = false) => {
	let timeout;
	return function () {
		let context = this;
		let args = arguments;
		if (timeout) clearTimeout(timeout);
		if (immediate) {
			var callNow = !timeout;
			timeout = setTimeout(() => {
				timeout = null;
			}, wait)
			if (callNow) func.apply(context, args)
		}
		else {
			timeout = setTimeout(function () {
				func.apply(context, args)
			}, wait);
		}
	}
}